<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import {
  queryDepartmentalAssessmentDetails,
  queryMatterProcessStatisticsDetails,
} from '../apis/index'
import useFetch from '@/hooks/useFetch'
import { PageParam } from '@/type'
import {
  columnList,
  sortColumnList,
  EDialogType,
  EMatterStatus,
} from '../utils/projectTable'
import DictionaryShow from '@/components/dictionary/DictionaryShow.vue'
import LeaderShow from '@/components/leader/LeaderShow.vue'
import useYear from '@screen/hooks/useYear'
import CustomDialog from './CustomDialog.vue'
import EventsDetail from './detail/EventsDetail.vue'
import { useShowDetail } from '../hooks/useShowDetail'

const { year } = useYear()

const props = withDefaults(
  defineProps<{
    show?: boolean
    options: {
      title: string
      [key: string]: any
    }
    type?: EDialogType
  }>(),
  {
    show: false,
    type: EDialogType.EVENT_COUNT,
  },
)

const api = computed(() => {
  if (props.type === EDialogType.EVENT_COUNT) {
    return queryMatterProcessStatisticsDetails
  }
  return queryDepartmentalAssessmentDetails
})

const { loading, execute, onFetchSuccess } = useFetch(
  api.value,
  {},
  false,
  false,
)

onFetchSuccess((data) => {
  tableData.value = data?.data ?? []
  pager.value.total = data.totalCount ?? 0
})

const tableData = ref([])

const columns = computed(() => {
  if (props.type === EDialogType.DEPARTMENT_SORT) {
    return sortColumnList
  }
  return columnList
})

// 分页相关
const pager = ref({
  currentPage: 1,
  pageSize: 14,
  total: 0,
  pageSizes: [14, 20, 50, 100, 200],
})

const searchVal = ref('')

onMounted(() => {
  getProjectList()
})

const handleSizeChange = (val: number) => {
  pager.value.pageSize = val
  getProjectList()
}
const handleCurrentChange = (val: number) => {
  pager.value.currentPage = val
  getProjectList()
}

function handleSearch() {
  getProjectList()
}

async function getProjectList() {
  const postData: PageParam = {
    currentPage: pager.value.currentPage,
    pageSize: pager.value.pageSize,
    sort: [
      {
        field: 'create_time',
        type: 'desc',
      },
    ],
    query: {
      year: year.value,
      taskType: props?.options?.taskType,
      matterStatus: props?.options?.matterStatus,
      name: searchVal.value,
      isFocus: props?.options?.isFocus,
      cardState: props?.options?.cardState,
      matterIdStr: props?.options?.matterIdStr,
    },
  }
  await execute(postData)
}

const { matterId, showDetail, handleShowDetail, handleClose } = useShowDetail()

const emits = defineEmits(['close'])
function close() {
  emits('close')
}
</script>

<template>
  <CustomDialog :options="options" @close="close">
    <template #default>
      <div class="flex-row-end">
        <div class="project-wrap-box-content-search flex-row-end">
          <el-input
            class="search-input"
            v-model="searchVal"
            maxlength="50"
            :placeholder="
              props.type === EDialogType.DEPARTMENT_SORT
                ? '请输入单位名称'
                : '请输入事项名称'
            "
            @keyup.enter="handleSearch"
          />
          <img
            class="project-wrap-box-content-search-img"
            @click="handleSearch"
            src="../images/search.png"
          />
        </div>
      </div>
      <div class="project-wrap-box-content-table">
        <el-table
          :loading="loading"
          :data="tableData"
          stripe
          style="width: 100%; background: transparent"
        >
          <el-table-column
            v-if="props.type !== EDialogType.DEPARTMENT_SORT"
            type="index"
            label="序号"
            width="60"
            align="center"
          ></el-table-column>
          <el-table-column
            v-for="item of columns"
            :key="item.prop"
            align="center"
            :prop="item.prop"
            :label="item.label"
            :width="item?.width"
          >
            <template #default="{ row, column }">
              <div v-if="column.property === 'matterTitle'">
                <a class="large-link" @click="handleShowDetail(row.id)">
                  {{ row.matterTitle }}
                </a>
              </div>
              <div v-else-if="column.property === 'domainId'">
                <DictionaryShow
                  parent-dictionary-value="runway"
                  :value="row.domainId"
                />
              </div>
              <div v-else-if="column.property === 'assignLeader'">
                <LeaderShow :leader-id="row.assignLeader" />
              </div>
              <div v-else-if="column.property === 'isFocus'">
                {{ row.isFocus ? '是' : '否' }}
              </div>
              <div v-else-if="column.property === 'responsibleLeader'">
                <LeaderShow :leader-id="row.responsibleLeader" />
              </div>
              <div v-else-if="column.property === 'matterStatus'">
                {{ EMatterStatus[row.matterStatus] }}
              </div>
              <div v-else>
                {{ row[column.property] }}
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="project-wrap-box-content-pagination flex-row-between">
        <div class="project-wrap-box-content-pagination-total">
          共
          <span class="project-wrap-box-content-pagination-total-num">
            {{ pager.total }}
          </span>
          条数据
        </div>
        <el-pagination
          v-model:current-page="pager.currentPage"
          v-model:page-size="pager.pageSize"
          :page-sizes="pager.pageSizes"
          :background="true"
          layout="sizes, prev, pager, next, jumper"
          :total="pager.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </template>
  </CustomDialog>
  <EventsDetail v-if="showDetail" :matter-id="matterId" @close="handleClose" />
</template>

<style lang="scss" scoped>
.project-wrap {
  &-box {
    &-content {
      padding: vh(30) vw(8) vh(30) vw(24);

      &-search {
        width: vw(300);
        height: vh(40);
        margin-right: vw(16);
        border-top: 1px solid var(--big-screent-hover-color);
        border-left: 1px solid var(--big-screent-hover-color);
        border-bottom: 1px solid var(--big-screent-hover-color);
        margin-bottom: vh(30);
        border-radius: vw(4);
        overflow: hidden;

        &-img {
          width: vw(88);
          height: vh(40);
          cursor: pointer;
          overflow: hidden;
        }
      }

      &-table {
        padding-right: vw(8);
        overflow: auto;
      }

      &-pagination {
        margin: vh(20) 0 0;

        &-total {
          font-size: vw(14);
          color: rgba(208, 222, 238, 1);

          &-num {
            margin: 0 vw(8);
            font-size: vw(16);
            font-weight: 700;
            color: #fff;
          }
        }
      }
    }

    &-footer {
      position: absolute;
      width: 100%;
      bottom: vh(17);
      left: 0;
      right: 0;
      padding: 0 vw(16);

      & img {
        width: 100%;
      }
    }
  }
}

:deep(.el-input__wrapper) {
  padding-left: vw(12);
  background: transparent !important;
  border: none !important;
  font-size: vw(16);
  box-shadow: none !important;
}

:deep(th) {
  color: rgba(126, 164, 207, 1) !important;
  font-size: vw(14) !important;
}

:deep(.el-table tr) {
  background: transparent !important;
}

:deep(.el-pager li),
:deep(.el-pagination button) {
  background-color: rgba(31, 95, 201, 0.1) !important;
  color: #fff;
  height: vh(32) !important;
}

:deep(.el-pager li.is-active) {
  background-color: var(--big-screent-hover-color) !important;
}

:deep(.el-select),
:deep(.is-active),
:deep(.el-pagination .el-input__wrapper) {
  height: vh(32) !important;
}

:deep(.el-select__wrapper) {
  min-height: vh(32) !important;
}

:deep(.el-pagination .el-input) {
  width: vw(56) !important;
}

:deep(.search-input) {
  width: vw(212) !important;
  height: vh(40) !important;
  border: none !important;
}
</style>
